<template>
  <div class="home">


<div class="tab-nav">
  <van-tabs v-model="active" :animated="true" color="#ff5f33" >
    <van-tab title="趣味生活" name="a" to="/"   ></van-tab>
    <van-tab title="数码极客" name="b" to="/digit" ></van-tab>
    <van-tab title="舌尖美味" name="c" to="/delicious"></van-tab>
    <van-tab title="用户"    name="d" to="/user"></van-tab>
</van-tabs>
</div>


 
     <!-- <router-link to="/digitdec/1">123</router-link> -->
     <router-view /> 

     <div class="left-list" v-for="(i,index) in homeDate" :key="index" @click="next(index)">
            <div class="list-img"><img :src="i.titlepic" alt=""></div>

            <div class="list-text">
                <h2>{{i.title}}</h2>
                <p class="text-dec">{{i.smalltext}}</p>
                <p class="text-time">
                  <span> <i class="time-log"><img src="../assets/img/time.svg" alt=""></i>{{i.newstime}}</span>
                  <span> <i class="see-log"><img src="../assets/img/see.svg" alt=""></i>{{i.onclick}}</span>
                </p>
            </div>
     </div>

  </div>
</template>

<script>
// @ is an alias to /src


export default {
  
  
   data(){
     return {
        homeDate:[],
        active: 'b',
     }
   },

    created() {
      this.getDate()
    },
   
    methods: {
     async  getDate() {
         
          // 本地请求数据用绝对路径,json文件要放在public文件夹中
         let data = await this.$axios.get('/data/digit.json')
          this.homeDate = data.data
       
           
         },
         pre() {
          this.$router.replace('/')
          console.log("ff");
         },

         
         next(index) {
          
          this.$router.push(`/digitdec/${index}`)
         },

    },
  components: {
    
  }
}
</script>

<style lang="scss" scoped>
       .home {
         position: relative;
          width: 100vw;
          margin-top: 10px;
          z-index: 1;
          // padding: 10px;


          .tab-nav {
            position: sticky; 
            top:0;
            left: 0;
            right: 0;
          
          }

          .left-list {
            display: flex;
             margin-bottom: 10px;
             background: white;
             border: 5px solid #eee;

             .list-img {
                  flex: 0 0 30vw;
                  width: 30vw;
                  height: 75px;
                  margin-right: 10px;

                & img {
                   width: 100%;
                   height: 100%;
                  //  display: block;
                }

             }

             .list-text {
               flex: 0 0 60vw;
               width: 60vw;
               padding: 5px;


               .text-dec {
                  width: 100%;
                  height: 30px;
                  line-height: 30px;
                  white-space:nowrap;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  font-size: 13px;
                  color: #aab2bd;
                  


               }

               .text-time {
                 font-size: 12px;
                  color: #aab2bd;

                    span {
                      margin-right: 5px;
                    }
                  .time-log,
                  .see-log {
                     display: inline-flex;
                     width: 15px;
                     height: 15px;
                     margin-right: 5px;

                      & img {
                        width: 100%;
                        height: 100%;
                      }
                  }

               }
             }
          }
       }
</style>
  